<!doctype html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			#pp2 {
				width: 9999px;
				height: 9999px;
				animation: switch 15s infinite;
			}

			#pp2>img {
				float: left;
			}

			#pp1 {
				width: 820px;
				height: 340px;
				overflow: hidden;
			}

			@keyframes switch {
				0% {}

				;

				20% {
					transform: translateX(0px);
				}

				40% {
					transform: translateX(-820px);
				}

				60% {
					transform: translateX(-1640px);
				}

				80% {
					transform: translateX(-2460px);
				}

				100% {
					transform: translateX(-3280px);
				}
			}
		</style>
	</head>
	<body>
		<div id="pp1">
			<div id="pp2">
				<img width="820" height="340" src="https://www.tukuchina.cn/images/index/banner2.png" />
				<img width="820" height="340" src="https://www.tukuchina.cn/images/index/banner3.png" />
				<img width="820" height="340" src="https://www.tukuchina.cn/images/index/banner4.png" />
			</div>
		</div>
	</body>
</html>
